<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bootstrap第1、2章</title>
		<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
		<style>
			body{
				background-color: darkseagreen;
			}
			h1{
				color: white;
			}
			h2{
				color: brown;
			}
			h3{
				color: cornflowerblue;
			}
			pre{
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h1 class="my">1.标题，副标题</h1>
			<h1>bootstrap标题1<small>副标题</small></h1>
			<h2>bootstrap标题2<small>副标题</small></h2>
			<h3>bootstrap标题3<div class="small">副标题</div></h3>
			<h4>bootstrap标题4<div class="small">副标题</div></h4>
			<br /><br /><br />
			<div class="h1">bootstrap标题1<small>副标题</small></div>
			<div class="h2">bootstrap标题2<small>副标题</small></div>
			<div class="h3">bootstrap标题3<small>副标题</small></div>
			<div class="h4">bootstrap标题4<small>副标题</small></div>
			<br /><br /><br />
			<h1 class="my">2.突出样式处理</h1>
			<p>我是普通文本，我的样子长成这样我是普通文本，我的样子长成这样我是普通文本</p>
			<p class="lead">我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。</p>
			<br /><br /><br />
			<h1 class="my">3.加粗</h1>
			<b>加粗</b>
			<strong>加粗</strong>
			<span>正常</span>
			<br /><br /><br />
			<h1 class="my">4.斜体</h1>
			<em>斜体</em>
			<i>斜体</i>
			<span>正常</span>
			<br /><br /><br />
			<h1 class="my">5.强调相关的类</h1>
			<p class="text-muted">.text-muted：提示，使用浅灰色（#999）</p>
			<p class="text-primary">.text-primary：主要，使用蓝色（#428bca）</p>
			<p class="text-success">.text-success：成功，使用浅绿色(#3c763d)</p>
			<p class="text-info">.text-info：通知信息，使用浅蓝色（#31708f）</p>
			<p class="text-warning">.text-warning：警告，使用黄色（#8a6d3b）</p>
			<p class="text-danger">.text-danger：危险，使用褐色（#a94442）</p>
			<br /><br /><br />
			<h1 class="my">5.文本对齐风格</h1>
			<p class="text-left">左对齐</p>
			<p class="text-right">右对齐</p>
			<p class="text-center">居中对齐</p>
			<p class="text-justify">两端对齐</p>
			<br /><br /><br />
			<h1 class="my">6.列表</h1>
			<p>1.有序列表，无序列表，bt只是做了一些微调</p>
			<p>2.去点列表</p>
			<ul class="list-unstyled">
				<li>去点列表</li>
				<li>去点列表</li>
				<li>去点列表</li>
			</ul>
			<p>3.内联列表：让li标签变成inline-block，导航常这样，而不是浮动，一种思路</p>
			<ul class="list-inline">
				<li>内联列表</li>
				<li>内联列表</li>
				<li>内联列表</li>
			</ul>
			<p>4.定义列表</p>
			<dl>
				<dt>定义列表</dt>
				<dd>也是微调</dd>
				<dd>也是微调</dd>
			</dl>
			<p>5.水平定义列表</p>
			<dl class="dl-horizontal">
				<dt>水平定义列表</dt>
				<dd>大调</dd>
				<dd>大调</dd>
				<br />
				<dt>水平定义列表</dt>
				<dd>大调</dd>
				<dd>大调</dd>
				<br />
				<dt>水平定义列表</dt>
				<dd>大调</dd>
				<dd>大调</dd>
			</dl>
			<br /><br /><br />
			<h1 class="my">7.代码</h1>
			<p>1、使用<code></code>来显示单行内联代码</p>
			<p>2、使用<pre></pre>来显示多行块代码</p>
			<p>3、使用<kbd></kbd>来显示用户输入代码</p>
			<div>
				code风格：
				<div>Bootstrap的代码风格有三种：
				  <code>&lt;code&gt;</code>
				  <code>&lt;pre&gt;</code>
				  <code>&lt;kbd&gt;</code>
				</div>
				pre风格：
				<div>
					<pre>
					&lt;ul&gt;
					&lt;li&gt;...&lt;/li&gt;
					&lt;li&gt;...&lt;/li&gt;
					&lt;li&gt;...&lt;/li&gt;
					&lt;/ul&gt;
					</pre>
				</div>
				kbd风格：
				<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>
			</div>
			<p class="lead text-info">pre的控制代码块大小，最高340</p>
			<pre class="pre-scrollable">
				&lt;ul&gt;
				&lt;li&gt;...&lt;/li&gt;
				&lt;li&gt;...&lt;/li&gt;
				&lt;li&gt;...&lt;/li&gt;
				&lt;/ul&gt;
				&lt;ul&gt;
				&lt;li&gt;...&lt;/li&gt;
				&lt;li&gt;...&lt;/li&gt;
				&lt;li&gt;...&lt;/li&gt;
				&lt;/ul&gt;
				&lt;ul&gt;
				&lt;li&gt;...&lt;/li&gt;
				&lt;li&gt;...&lt;/li&gt;
				&lt;li&gt;...&lt;/li&gt;
				&lt;/ul&gt;
				&lt;ul&gt;
				&lt;li&gt;...&lt;/li&gt;
				&lt;li&gt;...&lt;/li&gt;
				&lt;li&gt;...&lt;/li&gt;
				&lt;/ul&gt;
			</pre>
			<br /><br /><br />
			<h1 class="my">8.表格</h1>
			<p>.table：基础表格</p>
			<p>.table-striped：斑马线表格</p>
			<p>.table-bordered：带边框的表格</p>
			<p>.table-hover：鼠标悬停高亮的表格</p>
			<p>.table-condensed：紧凑型表格</p>
			<p>.table-responsive：响应式表格</p>
			<table class="table">
			   <thead>
			     <tr>
			       <th>表格标题</th>
			       <th>表格标题</th>
			       <th>表格标题</th>
			     </tr>
			   </thead>
			   <tbody>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			   </tbody>
			 </table>
			<br /><br />
			<table class="table-striped">
			   <thead>
			     <tr>
			       <th>表格标题</th>
			       <th>表格标题</th>
			       <th>表格标题</th>
			     </tr>
			   </thead>
			   <tbody>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			   </tbody>
			 </table>
			<br /><br />
			<table class="table-bordered">
			   <thead>
			     <tr>
			       <th>表格标题</th>
			       <th>表格标题</th>
			       <th>表格标题</th>
			     </tr>
			   </thead>
			   <tbody>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			   </tbody>
			 </table>
			<br /><br />
			<table class="table-hover">
			   <thead>
			     <tr>
			       <th>表格标题</th>
			       <th>表格标题</th>
			       <th>表格标题</th>
			     </tr>
			   </thead>
			   <tbody>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			   </tbody>
			 </table>
			<br /><br />
			<table class="table-condensed">
			   <thead>
			     <tr>
			       <th>表格标题</th>
			       <th>表格标题</th>
			       <th>表格标题</th>
			     </tr>
			   </thead>
			   <tbody>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			   </tbody>
			 </table>
			<br /><br />
			<table class="table-responsive">
			   <thead>
			     <tr>
			       <th>表格标题</th>
			       <th>表格标题</th>
			       <th>表格标题</th>
			     </tr>
			   </thead>
			   <tbody>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			   </tbody>
			 </table>
			<br /><br />
			<p class="lead text-primary">-1-tr行的类:active,.success,.info,.warning,.danger</p>
			<table class="table table-hover table-bordered table-condensed">
			   <thead>
			     <tr class="active">
			       <th>表格标题</th>
			       <th>表格标题</th>
			       <th>表格标题</th>
			     </tr>
			   </thead>
			   <tbody>
			     <tr class="success">
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr class="info">
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr class="warning">
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr class="danger">
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			   </tbody>
			 </table>
			<p class="lead text-primary">-2-基础表格</p>
			<dl class="dl-horizontal">
				<dt>.table主要有三个作用：主要源码查看bootstrap.css文件第1402行～第1441行，由于代码太长，此处不一一列举</dt>
				<dd class="text-info">1给表格设置了margin-bottom:20px以及设置单元内距</dd>
				<dd class="text-primary">2在thead底部设置了一个2px的浅灰实线</dd>
				<dd class="text-success">3每个单元格顶部设置了一个1px的浅灰实线</dd>
				<p class="lead">设置了table之后表格宽度是100%</p>
			</dl>
			<p class="lead text-primary">-3-斑马线表格</p>
			<p>其效果与基础表格相比，仅是在tbody隔行有一个浅灰色的背景色。其实现原理也非常的简单，利用CSS3的结构性选择器“:nth-child”来实现，所以对于IE8以及其以下浏览器，没有背景条纹效果。</p>
			<pre>
				.table-striped > tbody > tr:nth-child(odd) > td,
				.table-striped > tbody > tr:nth-child(odd) > th {
					background-color: #f9f9f9;
				}
			</pre>
			<p class="lead text-primary">-4-边框表格</p>
			<pre>
				.table-bordered {
				  	border: 1px solid #ddd;/*整个表格设置边框*/
				}
				.table-bordered > thead > tr > th,
				.table-bordered > tbody > tr > th,
				.table-bordered > tfoot > tr > th,
				.table-bordered > thead > tr > td,
				.table-bordered > tbody > tr > td,
				.table-bordered > tfoot > tr > td {
					border: 1px solid #ddd; /*每个单元格设置边框*/
				}
				.table-bordered > thead > tr > th,
				.table-bordered > thead > tr > td {
				  	border-bottom-width: 2px;/*表头底部边框*/
				}
			</pre>
			<p class="lead text-primary">-5-鼠标悬浮高亮的表格</p>
			<pre>
				.table-hover > tbody > tr:hover > td,
				.table-hover > tbody > tr:hover > th {
					background-color: #f5f5f5;
				}
			</pre>
			<p class="lead text-primary">-6-鼠标悬浮高亮的表格</p>
			<p>何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的内距padding的值。</p>
			<pre>
				.table-condensed > thead > tr > th,
				.table-condensed > tbody > tr > th,
				.table-condensed > tfoot > tr > th,
				.table-condensed > thead > tr > td,
				.table-condensed > tbody > tr > td,
				.table-condensed > tfoot > tr > td {
					padding: 5px;
				}
			</pre>
			<p class="lead text-primary">-7-鼠标悬浮高亮的表格</p>
			<p>随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。</p>
			<p class="text-primary">Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将&lt;table class="table"&gt;置于这个容器当中，这样表格也就具有响应式效果。</p>
			<p>Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下</p>
			<div class="table-responsive">
				<p class="text-primary">浏览器控制台只显示元素当前状态有的样式，媒体查询的样式得去他所在范围才显示</p>
				<table class="table table-bordered" style="width: 800px;">
					<tr>
						<td>表格单元格</td>
						<td>表格单元格</td>
						<td>表格单元格</td>
					</tr>
					<tr>
						<td>表格单元格</td>
						<td>表格单元格</td>
						<td>表格单元格</td>
					</tr>
				</table>
			</div>
			<pre>
				@media (max-width: 767px) {
				.table-responsive {
					width: 100%;
					margin-bottom: 15px;
					overflow-x: scroll;
					overflow-y: hidden;
					border: 1px solid #dddddd;
					-ms-overflow-style: -ms-autohiding-scrollbar;
					-webkit-overflow-scrolling: touch;
				}
				.table-responsive > .table {
					margin-bottom: 0;
				}
					.table-responsive > .table > thead > tr > th,
					.table-responsive > .table > tbody > tr > th,
					.table-responsive > .table > tfoot > tr > th,
					.table-responsive > .table > thead > tr > td,
					.table-responsive > .table > tbody > tr > td,
					.table-responsive > .table > tfoot > tr > td {
					white-space: nowrap;
				}
			</pre>
		</div>
	</body>
</html>